<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="装修清单" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">			
			<swiper
				:current="swiperCurrent" 
				@change="swiperchange" 
				class="detailed-list" 
				:style="{'height':swiperHeight + 'rpx'}"
				>
				<swiper-item class="swiper-item">
					<view class="tipc-cont flex align-center justify-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_time.png" style="width: 28rpx;height: 28rpx;"></image>
						<text class="f26 margin-left-xs">生成日期：2021.12.23 15:35</text>
					</view>
					<u-read-more
						:toggle="true" 
						close-text="展开" 
						font-size="22" color="#999999" 
						:show-height="swiperHeight-140"
						@open = "moreOpen"
						@close = "moreClose">
						<view class="card-box">
							<u-form :model="form" ref="uForm" class="form">
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">选择类型</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.type" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in type_radio_list" :key="index"
													:name="item.name"
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">设计师</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.designer" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in sjs_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">工人</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.worker" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in gr_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">装修方式</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.decoration_mode" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in zxfs_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-gap height="2" bg-color="#F7F7F7"></u-gap>
								<!-- 全装或者局部装 -->
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择户型</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.unit_type" disabled="true" placeholder="请选择户型"  @click="show_unitTyp = true"/>
										</view>									
									</view>
								</u-form-item>				
								<u-form-item :border-bottom="false" class="form-item" style="display: none;">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择房间</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.unit_type" disabled="true" placeholder="请选择房间"  @click="show_roomTyp = true"/>
										</view>
									</view>
								</u-form-item>
								<!-- 全装或者局部装 -->
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择阳台</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.balcony" disabled="true" placeholder="请选择阳台"  @click="show_balcony = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择色系</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.clrSys" disabled="true" placeholder="请选择色系"  @click="show_clrSys = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择风格</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.style" disabled="true" placeholder="请选择风格"  @click="show_style = true"/>
										</view>
									</view>
								</u-form-item>
								<u-gap height="2" bg-color="#F7F7F7"></u-gap>
								<u-form-item :border-bottom="false" class="form-item" prop="budget">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">预算价位</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.budget" placeholder="请输入预算价位"/>
										</view>
										<text class="end-text">万</text>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">所在城市</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.city" disabled="true" placeholder="请选择所在城市"  @click="show_city = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item" prop="address">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">详细地址</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.address" placeholder="请输入详细地址"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item" prop="area">
									<view class="form-content form-padding border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-weight">房屋面积</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.area" placeholder="请输入房屋面积"/>
										</view>
										<text class="end-text">m²</text>
									</view>
								</u-form-item>
							</u-form>
						</view>
					</u-read-more>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="tipc-cont flex align-center justify-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_time.png" style="width: 28rpx;height: 28rpx;"></image>
						<text class="f26 margin-left-xs">生成日期：2021.12.23 15:35</text>
					</view>
					<u-read-more
						:toggle="true" 
						close-text="展开" 
						font-size="22" color="#999999" 
						:show-height="swiperHeight-140"
						@open = "moreOpen"
						@close = "moreClose">
						<view class="card-box">
							<u-form :model="form" ref="uForm" class="form">
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">选择类型</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.type" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in type_radio_list" :key="index"
													:name="item.name"
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">设计师</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.designer" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in sjs_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">工人</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.worker" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in gr_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-form-item type="select" :border-bottom="false" class="form-item">
									<view class="form-content border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-text">装修方式</text>
										</view>
										<view class="form-data">
											<u-radio-group 
												active-color='#FFB81E' 
												v-model="form.decoration_mode" 
												width='50%'
												>
												<u-radio
													v-for="(item, index) in zxfs_radio_list"
													:key="index"
													:name="item.name"								
													:label-disabled="item.disabled"
													>
													{{item.name}}
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</u-form-item>
								<u-gap height="2" bg-color="#F7F7F7"></u-gap>
								<!-- 全装或者局部装 -->
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择户型</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.unit_type" disabled="true" placeholder="请选择户型"  @click="show_unitTyp = true"/>
										</view>									
									</view>
								</u-form-item>				
								<u-form-item :border-bottom="false" class="form-item" style="display: none;">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择房间</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.unit_type" disabled="true" placeholder="请选择房间"  @click="show_roomTyp = true"/>
										</view>
									</view>
								</u-form-item>
								<!-- 全装或者局部装 -->
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择阳台</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.balcony" disabled="true" placeholder="请选择阳台"  @click="show_balcony = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择色系</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.clrSys" disabled="true" placeholder="请选择色系"  @click="show_clrSys = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">选择风格</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.style" disabled="true" placeholder="请选择风格"  @click="show_style = true"/>
										</view>
									</view>
								</u-form-item>
								<u-gap height="2" bg-color="#F7F7F7"></u-gap>
								<u-form-item :border-bottom="false" class="form-item" prop="budget">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">预算价位</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.budget" placeholder="请输入预算价位"/>
										</view>
										<text class="end-text">万</text>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">所在城市</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.city" disabled="true" placeholder="请选择所在城市"  @click="show_city = true"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item" prop="address">
									<view class="form-content form-padding">
										<view class="form-lable">
											<text class="form-lable-weight">详细地址</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.address" placeholder="请输入详细地址"/>
										</view>
									</view>
								</u-form-item>
								<u-form-item :border-bottom="false" class="form-item" prop="area">
									<view class="form-content form-padding border-bottom-none">
										<view class="form-lable">
											<text class="form-lable-weight">房屋面积</text>
										</view>
										<view class="form-data">
											<u-input v-model="form.area" placeholder="请输入房屋面积"/>
										</view>
										<text class="end-text">m²</text>
									</view>
								</u-form-item>
							</u-form>
						</view>
					</u-read-more>
				</swiper-item>
			</swiper>
			
			<view class="dot-num flex justify-center margin-top">
				<view class="num-cont">
					<text style="color: #232323;">{{title_index + 1}}</text>
					<text style="color: #999999;">/2</text>
				</view>
			</view>
			
			<!-- 选择器 -->
			<u-select confirm-color="#FFB81E" v-model="show_unitTyp" :list="unitTyp_list" @confirm="unitTyp_confirm"></u-select>
			<u-select confirm-color="#FFB81E" v-model="show_balcony" :list="balcony_list" @confirm="balcony_confirm"></u-select>
			<u-select confirm-color="#FFB81E" v-model="show_clrSys" :list="clrSys_list" @confirm="clrSys_confirm"></u-select>
			<u-select confirm-color="#FFB81E" v-model="show_style" :list="style_list" @confirm="style_confirm"></u-select>
			<u-picker confirm-color="#FFB81E" mode="region" v-model="show_city" @confirm="city_confirm"></u-picker>
			
			<view class="content-item flex align-center justify-between">
				<button class="btn circle-btn" @click="modifyTheLst">修改清单</button>
				<button class="btn circle-btn ck-btn" @click="viewLst">查看清单</button>
			</view>

		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			title_index:0,
			form:{
				type:'毛坯房',
				designer:'需要',
				worker:'需要',
				decoration_mode:'整装',
				unit_type:'一室一厅',
				balcony:'阳台1',
				clrSys:'浅色系',
				style:'复式',
				budget:'23',
				city:'四川省-成都市',
				address:'金牛区锦西人家四期',
				area:'132',
			},
			rules: {				
				budget: [
					{
						required: true, 
						message: '请输入您的预算', 
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true, 
						message: '请输入详细地址', 
						trigger: 'blur'
					}
				],
				area: [
					{
						required: true, 
						message: '请输入房屋面积', 
						trigger: 'blur'
					}
				],
			},
			type_radio_list: [{
					name: '毛坯房',
					disabled: true
				},{
					name: '翻新房',
					disabled: true
				},{
					name: '局部装',
					disabled: true
				},{
					name: '工装',
					disabled: true
				}],
			sjs_radio_list:[
				{
					name: '需要',
					disabled: true
				},{
					name: '不需要',
					disabled: true
				}
			],
			gr_radio_list:[
				{
					name: '需要',
					disabled: true
				},{
					name: '不需要',
					disabled: true
				}
			],
			zxfs_radio_list:[
				{
					name: '整装',
					disabled: true
				},{
					name: '自装',
					disabled: true
				}
			],
			unitTyp_list:[
				{
					value: '户型',
					label: '户型'
				},
				{
					value: '户型2',
					label: '户型2'
				}
			],			
			show_unitTyp:false,
			balcony_list:[
				{
					value: '阳台',
					label: '阳台'
				},
				{
					value: '阳台2',
					label: '阳台2'
				}
			],
			show_balcony:false,
			clrSys_list:[
				{
					value: '色系',
					label: '色系'
				},
				{
					value: '色系2',
					label: '色系2'
				}
			],			
			show_clrSys:false,
			style_list:[
				{
					value: '风格',
					label: '风格'
				},
				{
					value: '风格2',
					label: '风格2'
				}
			],
			show_style:false,
			show_city:false,
			windowHeight:'',
			swiperHeight:'',
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {
		
	},
	onLoad(e) {},
	mounted () {
	    var _this = this
	    uni.getSystemInfo({
			success: function (res) {
				_this.windowHeight = (res.windowHeight-220) * 2
				_this.swiperHeight = _this.windowHeight
			}
	    })
	},
	methods: {
		swiperchange(index){
			this.title_index = index.detail.current;
		},
		moreOpen(){
			this.swiperHeight = 2000
		},
		moreClose(){
			this.swiperHeight = this.windowHeight
		},
		unitTyp_confirm(e) {
			this.form.unit_type = e[0]['label'];
			//console.log(e);
		},
		balcony_confirm(e) {
			this.form.balcony = e[0]['label'];
			//console.log(e);
		},
		clrSys_confirm(e) {
			this.form.clrSys = e[0]['label'];
			//console.log(e);
		},
		style_confirm(e) {
			this.form.style = e[0]['label'];
			//console.log(e);
		},
		city_confirm(e){
			let province = e.province.label
			let city = e.city.label
			let area = e.area.label
			this.form.city = province + "-" + city + "-" + area;
			//console.log(e)
		},
		modifyTheLst(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
				}
			});			
		},
		viewLst(){
			uni.navigateTo({
				url:'./consumption_list'
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
}

.content_box {
	.tipc-cont{
		margin: 34rpx 0;
	}
	.card-box{
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.form{
		/deep/.u-form-item{
			padding: 0;
			line-height: 0;
		}
		.form-content{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #F2F2F2;
			.form-lable{
				white-space: nowrap;
				margin-right: 50rpx;
				line-height: 64rpx;
				min-width: 20%;
				.form-lable-text{					
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					margin-left: -51rpx;
				}
				.form-lable-weight{
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					margin-left: -51rpx;
				}
			}
			.form-data{
				width: 100%;
			}
			/deep/.u-radio{
				margin-bottom: 60rpx;
			}
			.end-tipc{
				color: #999999;
			}
			.end-text{
				margin-right: 20rpx;
			}
			.row-data{
				padding: 0;
				overflow: hidden;
				margin-top: 50rpx;
				background: #f7f7f7;
				border-radius: 20rpx;
				box-sizing: border-box;
				.textarea{
					height: 300rpx;		
					padding: 42rpx 28rpx;
					width: 100%;
				}
			}
			.form-layout{
				padding-left: 0;
				margin-top: 50rpx;
			}			
		}
		.form-padding{
			padding: 40rpx 0;
			align-items: center;
		}
		.border-bottom-none{
			border: none;
		}			
	}
	.circle-btn{
		background: #4a515b !important;
		color: #FFFFFF;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 90rpx;
		margin: 42rpx 0 50rpx;
		width: 100%;
		font-family: PingFang SC, PingFang SC-Bold;
	}
	.ck-btn{
		background: #FFB81E !important;
	}
	.btn{
		width: 46%;
	}
	.swiper-item{
		padding: 0 22rpx;
		box-sizing: border-box;
	}
	.num-cont{
		padding: 0 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #e5e5e5;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #232323;
	}
}
</style>
